---
breakpoint: tablet
title: Pseudo styles
---

# Pseudo selectors

style props allow you to specify certain pseudo selectors. This allows you to add adhoc styling for particular interactions.

```jsx-live
<Box
  _hover={{ backgroundColor: 'primary', color: 'white' }}
  _active={{ backgroundColor: 'primary300', color: 'white' }}
  _focus={{ outline: '2px solid blue' }}
  tabIndex="-1"
  role="button"
  backgroundColor="primaryTint"
  color="primary800"
  padding="major-2"
>
  This is a box
</Box>
```
